<template>
  <div class="app-container rela">
    <el-tabs v-model="activeName" ref="tabs">
      <el-tab-pane label="基础信息" name="one" class="tableLine">
        <div v-loading="infoLoading">
          <div class="flex header mg-bottom-10">
            <el-switch
              v-model="switchData"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="clickSwitch"
            ></el-switch>
            <div class="mg-left-10" v-if="ParkInfo.state === 1">启动中</div>
            <div v-else class="mg-left-10" style="color:#ccc">停止中</div>
          </div>
          <div>
            <table width="100%" class="table-border" cellspacing="0">
              <tr height="40">
                <td class="bg-color  pd-left-10 " width="25">标题</td>
                <td class="bg-color  pd-left-10 " width="60">内容</td>
                <td class="bg-color  pd-left-10 text-center" width="15">操作</td>
              </tr>
              <tr height="30">
                <td>园区展图</td>
                <td>
                  <el-image
                    style="width: 100px; height: 100px "
                    :src="ParkInfo.imgId | imageFormat"
                    fit="scale-down"
                  ></el-image>
                </td>
                <td rowspan="7" class="text-center blue"><span @click="modify">修改</span></td>
              </tr>
              <tr height="30">
                <td>招商行业</td>
                <td>{{ParkInfo.industryName}}</td>
              </tr>
              <tr height="30">
                <td>联系人</td>
                <td>{{ParkInfo.contact}}</td>
              </tr>
              <tr height="30">
                <td>招商热线</td>
                <td>{{ParkInfo.tel}}</td>
              </tr>
              <tr height="30">
                <td>园区简介</td>
                <td>{{ParkInfo.briefIntroduction}}</td>
              </tr>
              <tr height="30">
                <td>招商标准</td>
                <td>{{ParkInfo.standard}}</td>
              </tr>
              <tr height="30">
                <td>园区优势</td>
                <td>{{ParkInfo.advantage}}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="招商项目" name="two" class="tableLine">
        <div class="filter-container">
          <div class="flex-row justify-between w-100P   padding-lr-20">
            <el-form inline :model="selectData" ref="selectData" class="demo-form-inline ">
              <el-form-item label="项目标题" prop="name">
                <el-input
                  v-model="selectData.name"
                  class="input-width"
                  placeholder="请输入项目标题"
                />
              </el-form-item>
              <el-form-item label="项目类型" prop="typeId">
                <el-select v-model="selectData.typeId" placeholder="请选择项目类型">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="招商状态" prop="state">
                <el-select v-model="selectData.state" placeholder="请选择招商状态">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>

            <div class="flex-row search-button-bar">
              <el-button type="info" @click="getList">查询</el-button>
              <el-button @click="handleResetQuery()">重置</el-button>
            </div>
          </div>
        </div>
        <div class="flex-row justify-between">
          <div class="flex-row">
            <custom-button class="custom-button" @click="maintainReport(0)"></custom-button>
          </div>
        </div>
        <div class="flex-sub table-container">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            header-cell-class-name="table-header-cell"
            fit
            highlight-current-row
            :max-height="600"
          >
            <el-table-column label="项目展图">
              <template slot-scope="scope">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.imgId | imageFormat"
                  fit="scale-down"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column label="项目标题">
              <template slot-scope="scope">
                <div class="o">
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="项目类型">
              <template slot-scope="scope">
                {{ scope.row.typeName }}
              </template>
            </el-table-column>
            <el-table-column label="建筑面积（㎡）" align="center">
              <template slot-scope="scope">
                {{ scope.row.area }}
              </template>
            </el-table-column>
            <el-table-column label="装修程度" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.decorationDegree }}</span>
              </template>
            </el-table-column>
            <el-table-column label="配套设施" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.facilities }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目简介" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.briefIntroduction }}</span>
              </template>
            </el-table-column>
            <el-table-column label="招商状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.state === 1">启用</span>
                <span v-else>禁用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="110" align="center">
              <template slot-scope="scope">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link blue">更多</span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item divided @click.native="maintainReport(scope.row.id)">
                      修改
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="scope.row.state === 1"
                      divided
                      @click.native="StopShow(scope.row)"
                    >
                      禁用
                    </el-dropdown-item>
                    <el-dropdown-item v-else divided @click.native="StopShow(scope.row)">
                      启动
                    </el-dropdown-item>
                    <el-dropdown-item divided @click.native="deleteMsg(scope.row.id)">
                      删 除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              background
              :total="total"
              :page-size="paging.pageSize"
              layout="total, prev, pager, next, jumper"
              :current-page="paging.pageNo"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 招商信息页 -->
    <el-dialog title="招商开关" :visible.sync="isShow" width="20%">
      <div class="text-box" v-show="!isStaus">
        <i class="el-icon-warning mg-right-10"></i>
        招商关闭后将不会进行园区招商展示,请谨慎操作！
      </div>
      <div class="text-box" v-show="isStaus">
        <i class="el-icon-warning mg-right-10"></i>
        开启后将为园区进行招商展示
      </div>
      <div class="dialog-div">
        <ul class="flex">
          <li>招商行业：</li>
          <li>{{ParkInfo.industryName}}</li>
        </ul>
        <ul class="flex">
          <li>联 系 人 ：</li>
          <li>{{ParkInfo.contact}}</li>
        </ul>
        <ul class="flex">
          <li>招商热线：</li>
          <li>{{ParkInfo.tel}}</li>
        </ul>
        <ul class="flex">
          <li>招商状态：</li>
          <li v-show="isStaus">OFF</li>
          <li v-show="!isStaus">NO</li>
        </ul>
      </div>
      <div class="flex justify-center">
        <el-button type="primary" @click="success">保存</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
    <!-- 招商项目 -->
    <el-dialog :title="attractTitle" :visible.sync="attractIsShow" width="20%">
      <div class="text-box" v-if="attractDialog.state === 1">
        <i class="el-icon-warning mg-right-10"></i>
        禁用后该项目将不会进行招商展示，请谨慎操作！
      </div>
      <div class="text-box" v-else>
        <i class="el-icon-warning mg-right-10"></i>
        开启后将为该项目进行招商展示
      </div>
      <div class="dialog-div">
        <ul class="flex">
          <li>项目标题：</li>
          <li>{{attractDialog.briefIntroduction}}</li>
        </ul>
        <ul class="flex">
          <li>项目类型：</li>
          <li>{{attractDialog.typeName}}</li>
        </ul>
        <ul class="flex">
          <li>建筑面积：</li>
          <li>{{attractDialog.area}}</li>
        </ul>
        <ul class="flex">
          <li>装修程度：</li>
          <li>{{attractDialog.decorationDegree}}</li>
        </ul>
        <ul class="flex">
          <li>招商状态：</li>
          <li v-if="attractDialog.state === 1">OFF</li>
          <li v-else>NO</li>
        </ul>
      </div>
      <div class="flex justify-center">
        <el-button type="primary" @click="successAttract">保存</el-button>
        <el-button type="info" @click="cancelAttract">取消</el-button>
      </div>
    </el-dialog>
    <div class="abso" style="top:10%;left:20%">
      <basics :show.sync="valueChild"></basics>
    </div>
    <project
      :visible.sync="detailedShow"
      :delogId="delogId"
      :projectType="typeOptions"
      ref="mychild"
    ></project>
  </div>
</template>
<script>
import basics from './components/Basics'
import project from './components/project'
import {
  getRecruitInfo,
  RecruitModify,
  getTableList,
  DeleteProjectId,
  projectTypeUp,
  Updateproject,
} from './api'
export default {
  components: { basics, project },
  data() {
    return {
      userId: sessionStorage.getItem('userId'),
      activeName: 'one',
      //  基础信息页面
      infoLoading: false, // 基础信息loading
      switchData: true, // 招商开关
      isShow: false,
      isStaus: true,
      ParkInfo: {},
      valueChild: false,
      //  招商列表
      selectData: {
        name: '',
        typeId: '',
        state: '',
      },
      typeOptions: [],
      statusOptions: [
        { label: '全部', value: 2 },
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ],
      list: [],
      listLoading: false,
      paging: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      attractTitle: '启用项目',
      attractIsShow: false,
      attractDialog: {},
      detailedShow: false,
      delogId: '',
    }
  },
  mounted() {
    this.getTypeOptions()
    this.getParkInfo()
    this.getList()
  },
  methods: {
    // 获取招商类型下拉框
    getTypeOptions() {
      projectTypeUp().then(res => {
        this.typeOptions = res
      })
    },
    // 获取基础信息
    async getParkInfo() {
      this.infoLoading = true
      const allData = await getRecruitInfo(this.paging)
      if (allData.state === 1) {
        this.switchData = true
      } else {
        this.switchData = false
      }
      this.ParkInfo = allData
      this.infoLoading = false
    },
    // 招商开关
    clickSwitch() {
      this.isShow = true
      this.isStaus = this.switchData
    },
    // 招商开关保存
    success() {
      this.isShow = false
      if (this.switchData === true) {
        this.ParkInfo.state = 1
      } else {
        this.ParkInfo.state = 0
      }
      RecruitModify({ ...this.paging, ...this.ParkInfo }).then(res => {
        this.$message({
          message: '修改成功！',
          type: 'success',
        })
      })
    },
    //  取消
    cancel() {
      this.isShow = false
      this.switchData = !this.switchData
    },
    modify() {
      this.valueChild = true
    },
    // 招商项目
    // 获取招商项目列表    this.selectData
    getList() {
      this.listLoading = true
      getTableList({ ...this.paging, projectVo: this.selectData }).then(res => {
        this.list = res.records
        this.paging.pageNo = res.pageNo
        this.paging.pageSize = res.pageSize
        this.total = res.total
        this.listLoading = false
      })
      this.handleResetQuery()
    },
    // 修改
    maintainReport(id) {
      if (id !== 0) {
        this.delogId = id
        this.$refs.mychild.parentHandleclick(id)
      } else {
        this.delogId = ''
        this.$refs.mychild.clearImg()
      }
      this.detailedShow = true
    },
    StopShow(row) {
      this.attractDialog = row
      if (row.state === 1) {
        this.attractTitle = '禁用项目'
      }
      this.attractIsShow = true
    },
    successAttract() {
      if (this.attractDialog.state === 0) {
        this.attractDialog.state = 1
        Updateproject(this.attractDialog).then(res => {
          if (res === true) {
            this.$message({
              message: '启用成功！',
              type: 'success',
            })
          }
        })
      } else {
        this.attractDialog.state = 0
        Updateproject(this.attractDialog).then(res => {
          if (res === true) {
            this.$message({
              message: '禁用成功！',
              type: 'success',
            })
          }
        })
      }
      this.attractIsShow = false
    },
    cancelAttract() {
      this.attractIsShow = false
    },
    // 删除
    deleteMsg(id) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteProjectId({ ProjectId: id }).then(res => {
          if (res) {
            this.$message({ message: '删除成功！', type: 'success'})
            this.getList()
          } else {
            this.$message({ message: '删除失败！', type: 'info' })
          }
        })
      })      
    },
    // 点击分页
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getList()
    },
    // 跳转分页
    handleCurrentChange(val) {
      this.paging.pageNo = val
      this.getList()
    },
    // 重置
    handleResetQuery() {
      this.resetForm('selectData')
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  padding: vw(25px);
  border: 1px solid #ccc;
  .tableLine {
    height: 100%;
    .header {
      justify-content: flex-end;
      padding-right: vw(10px);
    }
    .table-border,
    tr,
    td {
      border: 1px solid #ccc;
    }
    td {
      padding-left: vw(10px);
      font-size: 14px;
    }
    .table-border tr td:first-child {
      text-align: center;
    }
  }
}
.bg-color {
  background-color: #ddd;
  font-weight: 600;
}
.blue {
  color: #0084ee;
  cursor: pointer;
  font-weight: 600;
}
.dialog-div li {
  list-style: none;
}
.text-box {
  border: 1px solid #0084ee;
  line-height: vw(15px);
  font-size: vw(14px);
  border-radius: 5px;
  padding: vw(5px) vw(3px);
  color: #0084ee;
}
.text-center {
  text-align: center;
}
::v-deep .el-image {
  margin-right: 10px;
}
::v-deep .el-dialog {
  border-radius: 5px;
}
::v-deep .cell {
  color: #000;
}
.search-button-bar {
  height: vh(40px);
  margin-top: vh(2px);
}
.input-width {
  width: vw(250px);
  font-size: vw(14px);
}
</style>
